/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-show="hide">
		<view @tap="closeRegionsModal"class="cover-layer"></view>
		<view class="regions">
			<block v-for="(item,index) in addressData" :key="index">
				<view @tap="openRegionsModal" class="region" :data-level="item.level":data-id="item.id" :data-name="item.name">{{item.name}}</view>
			</block>
			
		
		</view>
	</view>
</template>

<script>
	import {getAddress} from "@/api/api.js";
	export default {
		props:{
			hide:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				addressId:0,//获取一级地区id
				addressData:"",
				ishide:false,
				province_name:{
					name:"",
					id:0,
				},
				city_name:{
					name:"",
					id:0
				},
				district_name:{
					name:"",
					id:0
				},
					
				
				
			}
		},
		created(){
			this._getAddress(this.addressId)
		},
		methods: {
			_getAddress(id){
				getAddress(id).then(res=>{
					console.log(res)
					this.addressData=res;
				})
			},
			openRegionsModal(e){
				var level=e.currentTarget.dataset.level;
				let name=e.currentTarget.dataset.name;
				let ids= e.currentTarget.dataset.id;
				if(level==1){
					this.province_name.name=name;
					this.province_name.id=ids;
				}
				if(level==2){
					this.city_name.name=name;
					this.city_name.id=ids
				}
				if(level==3){
					this.district_name.name=name
					this.district_name.id=ids;
				}
				if(level==4){
					
					// this.twon_name=name
					// this.twon_name.id=id;
				}
			
				this.addressId=e.currentTarget.dataset.id;
				this._getAddress(this.addressId)
				var address={
					province_name:this.province_name,
					city_name:this.city_name,
					district_name:this.district_name
				}
				var obj={
					ishide:false,
					addressId:this.addressId
				}
				if(level>2){ //关闭弹窗 给父组件传值
					var obj={
						ishide:false,
						addressId:this.addressId,
						addressInfo:address
					}
					this.$emit("closeRegionsModal",obj)
					
				}
			},
			closeRegionsModal(){
				var address={
					province_name:this.province_name,
					city_name:this.city_name,
					district_name:this.district_name
				}
				var obj={
					ishide:false,
					addressId:0,
					addressInfo:address
				}
				this.$emit("closeRegionsModal",obj)
			}
		}
	}
</script>

<style lang="scss">
	.cover-layer{
	    position: fixed;
	    left: 0;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 11;
	    background: rgba(0,0,0,0.4);
	    width: 100%;
	    height: 100%;
	}
	/* 区域选择弹框 */
	.regions{
	    z-index: 20;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 100rpx;
	    overflow-x: hidden;
	    font-size: 28rpx;
	    color: #afafaf;
	    background-color: white;
	    padding: 0 25rpx;
	}
	.region{
	    line-height: 84rpx;
	    border-bottom: 1rpx solid #f3f3f3;
	}
</style>
